21 июля 2025 г.Русский

Всеобъемлющее руководство по Cypress, мощному фреймворку для сквозного тестирования, охватывающее установку, написание тестов, отладку, интеграцию CI/CD и лучшие практики.

Cypress: Полное руководство по сквозному тестированию веб-приложений

В современной быстро развивающейся среде веб-разработки обеспечение качества и надежности веб-приложений имеет первостепенное значение. Сквозное (E2E) тестирование играет решающую роль в проверке того, что все компоненты приложения безупречно работают вместе с точки зрения пользователя. Cypress стал ведущим фреймворком для E2E тестирования, предлагая удобный для разработчиков интерфейс, мощные функции и отличную производительность. Это всеобъемлющее руководство проведет вас через все, что вам нужно знать, чтобы начать работу с Cypress и эффективно тестировать ваши веб-приложения.

Что такое Cypress?

Cypress — это инструмент для тестирования внешнего интерфейса нового поколения, созданный для современного веба. В отличие от традиционных фреймворков тестирования, которые запускают тесты в браузере, Cypress работает непосредственно в браузере, предоставляя вам беспрецедентный контроль и видимость поведения вашего приложения. Он разработан, чтобы быть быстрым, надежным и простым в использовании, что делает его популярным выбором среди разработчиков и инженеров QA во всем мире. Cypress написан на JavaScript и выполняется в браузере, что делает его очень производительным и обеспечивает беспрецедентный доступ к внутренним компонентам приложения.

Основные преимущества использования Cypress

Удобство для разработчиков: Cypress предоставляет чистый и интуитивно понятный API, что упрощает написание и отладку тестов.
Путешествие во времени: Cypress делает снимки состояния вашего приложения во время каждой команды теста, позволяя вам вернуться во времени и увидеть, что именно произошло в любой момент.
Перезагрузки в реальном времени: Cypress автоматически перезагружается, когда вы вносите изменения в свои тесты, обеспечивая мгновенную обратную связь.
Автоматическое ожидание: Cypress автоматически ожидает, пока элементы станут видимыми или интерактивными, прежде чем выполнять действия, устраняя необходимость в явных ожиданиях.
Управление сетью: Cypress позволяет вам заглушать сетевые запросы и ответы, позволяя вам моделировать различные сценарии и тестировать обработку ошибок вашего приложения.
Возможность отладки: Cypress предоставляет отличные инструменты отладки, включая мощный отладчик и подробные сообщения об ошибках.
Кросс-браузерное тестирование: Cypress поддерживает несколько браузеров, включая Chrome, Firefox, Edge и Electron.
Автономное тестирование: Запускайте тесты в автономном режиме для более быстрого выполнения в средах CI/CD.
Встроенные утверждения: Cypress предоставляет богатый набор встроенных утверждений для проверки ожидаемого поведения вашего приложения.

Установка и настройка

Начать работу с Cypress очень просто. Вот как его установить:

Предварительные условия: Убедитесь, что в вашей системе установлены Node.js и npm (Node Package Manager). Вы можете скачать их с официального сайта Node.js.
Установите Cypress: Откройте свой терминал или командную строку, перейдите в каталог своего проекта и выполните следующую команду:

            npm install cypress --save-dev

Откройте Cypress: После завершения установки вы можете открыть Cypress Test Runner, выполнив:

            npx cypress open

Эта команда запустит Cypress Test Runner, который предоставляет графический интерфейс для запуска и отладки ваших тестов.

Написание вашего первого теста Cypress

Давайте создадим простой тест, чтобы проверить, правильно ли загружается домашняя страница веб-сайта. Создайте новый файл с именем `example.cy.js` в каталоге `cypress/e2e` вашего проекта.

            
// cypress/e2e/example.cy.js

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    cy.contains('type').click()
    cy.url().should('include', '/commands/actions')

    cy.get('.action-email')
      .type('fake@email.com')
      .should('have.value', 'fake@email.com')
  })
})

Давайте разберем этот тест:

`describe()`: определяет набор тестов, который представляет собой коллекцию связанных тестов.
`it()`: определяет отдельный тестовый случай в наборе тестов.
`cy.visit()`: переходит по указанному URL.
`cy.contains()`: находит элемент, содержащий указанный текст.
`.click()`: щелкает выбранный элемент.
`cy.url()`: получает текущий URL страницы.
`.should()`: делает утверждение о состоянии приложения.
`cy.get()`: выбирает элемент с помощью селектора CSS.
`.type()`: вводит текст в выбранный элемент.
`.should('have.value', 'fake@email.com')`: утверждает, что значение элемента равно 'fake@email.com'.

Запустите этот тест в Cypress Test Runner, чтобы увидеть его в действии. Вы должны увидеть, как браузер переходит на веб-сайт Cypress Kitchen Sink, щелкает ссылку «type» и проверяет URL.

Команды Cypress

Cypress предоставляет широкий спектр команд для взаимодействия с вашим приложением. Вот некоторые из наиболее часто используемых команд:

`cy.visit(url)`: переходит по указанному URL.
`cy.get(selector)`: выбирает элемент с помощью селектора CSS.
`cy.contains(content)`: выбирает элемент, содержащий указанный текст.
`cy.click()`: щелкает выбранный элемент.
`cy.type(text)`: вводит текст в выбранный элемент.
`cy.clear()`: очищает содержимое элемента ввода или textarea.
`cy.submit()`: отправляет форму.
`cy.check()`: устанавливает флажок или переключатель.
`cy.uncheck()`: снимает флажок.
`cy.select(value)`: выбирает параметр из раскрывающегося списка.
`cy.scrollTo(position)`: прокручивает страницу до указанной позиции.
`cy.trigger(event)`: запускает событие DOM для выбранного элемента.
`cy.request(url, options)`: отправляет HTTP-запрос по указанному URL.
`cy.intercept(route, handler)`: перехватывает HTTP-запросы, соответствующие указанному маршруту.
`cy.wait(time)`: ждет указанное количество времени.
`cy.reload()`: перезагружает текущую страницу.
`cy.go(direction)`: переходит на предыдущую или следующую страницу в истории браузера.
`cy.url()`: получает текущий URL страницы.
`cy.title()`: получает заголовок страницы.
`cy.window()`: получает объект window.
`cy.document()`: получает объект document.
`cy.viewport(width, height)`: устанавливает размер области просмотра.

Это лишь некоторые из множества команд, доступных в Cypress. Обратитесь к документации Cypress для получения полного списка команд и их параметров.

Утверждения в Cypress

Утверждения используются для проверки ожидаемого поведения вашего приложения. Cypress предоставляет богатый набор встроенных утверждений, которые можно использовать для проверки состояния элементов, URL-адреса, заголовка и многого другого. Утверждения связываются после команд Cypress с помощью метода `.should()`.

Вот несколько распространенных примеров утверждений:

`.should('be.visible')`: утверждает, что элемент виден.
`.should('not.be.visible')`: утверждает, что элемент не виден.
`.should('be.enabled')`: утверждает, что элемент включен.
`.should('be.disabled')`: утверждает, что элемент отключен.
`.should('have.text', 'expected text')`: утверждает, что элемент имеет указанный текст.
`.should('contain', 'expected text')`: утверждает, что элемент содержит указанный текст.
`.should('have.value', 'expected value')`: утверждает, что элемент имеет указанное значение.
`.should('have.class', 'expected class')`: утверждает, что элемент имеет указанный класс.
`.should('have.attr', 'attribute name', 'expected value')`: утверждает, что элемент имеет указанный атрибут и значение.
`.should('have.css', 'css property', 'expected value')`: утверждает, что элемент имеет указанное свойство CSS и значение.
`.should('have.length', expected length)`: утверждает, что элемент имеет указанную длину (например, количество элементов в списке).

Вы также можете создавать собственные утверждения в соответствии со своими конкретными потребностями.

Расширенные методы Cypress

Заглушки и макеты

Cypress позволяет вам заглушать сетевые запросы и ответы, позволяя вам моделировать различные сценарии и тестировать обработку ошибок вашего приложения. Это особенно полезно для тестирования функций, которые зависят от внешних API или служб.

Чтобы заглушить сетевой запрос, вы можете использовать команду `cy.intercept()`. Например, приведенный ниже код заглушает GET-запрос к `/api/users` и возвращает макетный ответ:

            
cy.intercept('GET', '/api/users', {
  statusCode: 200,
  body: [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' }
  ]
}).as('getUsers')

Затем вы можете дождаться перехваченного запроса с помощью `cy.wait('@getUsers')` и убедиться, что ваше приложение правильно обрабатывает макетный ответ.

Работа с локальным хранилищем и файлами cookie

Cypress предоставляет команды для взаимодействия с локальным хранилищем и файлами cookie. Вы можете использовать эти команды для установки, получения и очистки локального хранилища и файлов cookie в своих тестах.

Чтобы установить элемент локального хранилища, вы можете использовать команду `cy.window()` для доступа к объекту window, а затем использовать метод `localStorage.setItem()`. Например:

            
cy.window().then((win) => {
  win.localStorage.setItem('myKey', 'myValue')
})

Чтобы получить элемент локального хранилища, вы можете использовать команду `cy.window()`, а затем использовать метод `localStorage.getItem()`. Например:

            
cy.window().then((win) => {
  const value = win.localStorage.getItem('myKey')
  expect(value).to.equal('myValue')
})

Чтобы установить файл cookie, вы можете использовать команду `cy.setCookie()`. Например:

            
cy.setCookie('myCookie', 'myCookieValue')

Чтобы получить файл cookie, вы можете использовать команду `cy.getCookie()`. Например:

            
cy.getCookie('myCookie').should('have.property', 'value', 'myCookieValue')

Обработка загрузки файлов

Cypress предоставляет плагин под названием `cypress-file-upload`, который упрощает загрузку файлов в ваших тестах. Чтобы установить плагин, выполните следующую команду:

            npm install -D cypress-file-upload

Затем добавьте следующую строку в свой файл `cypress/support/commands.js`:

            
import 'cypress-file-upload';

Затем вы можете использовать команду `cy.uploadFile()` для загрузки файла. Например:

            
cy.get('input[type="file"]').attachFile('example.txt')

Работа с IFrames

Тестирование IFrames может быть сложным, но Cypress предоставляет способ взаимодействия с ними. Вы можете использовать команду `cy.frameLoaded()` для ожидания загрузки IFrame, а затем использовать команду `cy.iframe()` для получения объекта документа IFrame.

            
cy.frameLoaded('#myIframe')
cy.iframe('#myIframe').find('button').click()

Cypress и непрерывная интеграция/непрерывное развертывание (CI/CD)

Интеграция Cypress в ваш конвейер CI/CD имеет важное значение для обеспечения качества вашего приложения. Вы можете запускать тесты Cypress в автономном режиме в своей среде CI/CD. Вот как:

Установите Cypress: Убедитесь, что Cypress установлен как зависимость в вашем проекте.
Настройте CI/CD: Настройте свой конвейер CI/CD для запуска тестов Cypress после каждой сборки.
Запустите Cypress в автономном режиме: Используйте команду `cypress run` для запуска тестов Cypress в автономном режиме.

Пример конфигурации CI/CD (с использованием GitHub Actions):

            
name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Install dependencies
        run: npm install
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          start: npm start
          wait-on: 'http://localhost:3000'

Эта конфигурация будет запускать тесты Cypress всякий раз, когда код отправляется в ветку `main` или создается запрос на включение в ветку `main`. Действие `cypress-io/github-action` упрощает процесс запуска тестов Cypress в GitHub Actions.

Отладка тестов Cypress

Cypress предоставляет отличные инструменты отладки, которые помогут вам выявлять и устранять проблемы в ваших тестах. Вот несколько советов по отладке тестов Cypress:

Используйте Cypress Test Runner: Cypress Test Runner предоставляет визуальный интерфейс для запуска и отладки ваших тестов. Вы можете пошагово проходить свои тесты, проверять состояние приложения и просматривать подробные сообщения об ошибках.
Используйте команду `cy.pause()`: Команда `cy.pause()` приостанавливает выполнение вашего теста и позволяет вам проверить состояние приложения в инструментах разработчика браузера.
Используйте команду `cy.debug()`: Команда `cy.debug()` выводит выбранный элемент в консоль, позволяя вам проверить его свойства и атрибуты.
Используйте инструменты разработчика браузера: Инструменты разработчика браузера предоставляют множество информации о вашем приложении, включая DOM, сетевые запросы и журналы консоли.
Внимательно читайте сообщения об ошибках: Cypress предоставляет подробные сообщения об ошибках, которые могут помочь вам определить причину ошибки. Обратите внимание на сообщение об ошибке и трассировку стека.

Cypress и другие фреймворки тестирования

Хотя Cypress является мощным фреймворком для сквозного тестирования, важно понимать, чем он отличается от других популярных вариантов. Вот краткий обзор:

Selenium: Selenium — это широко используемый фреймворк для автоматизированного тестирования. Будучи гибким и поддерживающим несколько языков, его может быть сложно настроить и поддерживать. Cypress предлагает более простой и удобный для разработчиков интерфейс, особенно для приложений на основе JavaScript.
Puppeteer: Puppeteer — это библиотека Node, которая предоставляет API высокого уровня для управления headless Chrome или Chromium. Он отлично подходит для сбора данных и автоматизации задач браузера, но может потребовать больше ручной настройки по сравнению с Cypress для сквозного тестирования.
Playwright: Playwright — это еще один кросс-браузерный фреймворк автоматизации, разработанный Microsoft. Он имеет сходство с Puppeteer, но предлагает более широкую поддержку браузеров. Cypress имеет уникальный отладчик с возможностью перемещения во времени и более интегрированный опыт тестирования.

Выбор фреймворка зависит от конкретных потребностей и требований вашего проекта. Cypress — отличный выбор для современных веб-приложений, которым требуется быстрое, надежное и удобное для разработчиков сквозное тестирование.

Реальные примеры Cypress в действии

Давайте рассмотрим несколько реальных примеров того, как Cypress можно использовать для тестирования различных типов веб-приложений:

Тестирование приложения для электронной коммерции

Вы можете использовать Cypress для тестирования различных пользовательских потоков в приложении для электронной коммерции, таких как:

Поиск продуктов
Добавление продуктов в корзину
Оформление заказа и размещение заказа
Управление настройками учетной записи

Вот пример теста Cypress, который проверяет, что пользователь может успешно добавить продукт в свою корзину:

            
it('Adds a product to the cart', () => {
  cy.visit('/products')
  cy.get('.product-card').first().find('button').click()
  cy.get('.cart-count').should('have.text', '1')
})

Тестирование приложения для социальных сетей

Вы можете использовать Cypress для тестирования взаимодействия пользователей в приложении для социальных сетей, такого как:

Создание новой публикации
Лайк публикации
Комментирование публикации
Подписка на других пользователей

Вот пример теста Cypress, который проверяет, что пользователь может успешно создать новую публикацию:

            
it('Creates a new post', () => {
  cy.visit('/profile')
  cy.get('#new-post-textarea').type('Hello, world!')
  cy.get('#submit-post-button').click()
  cy.get('.post').first().should('contain', 'Hello, world!')
})

Тестирование банковского приложения

Для банковских приложений Cypress можно использовать для тестирования критически важных функций, таких как:

Безопасный вход в систему
Проверка баланса счета
Перевод средств
Управление бенефициарами

Тест для проверки перевода средств может выглядеть следующим образом (с соответствующей заглушкой для безопасности):

            
it('Transfers funds successfully', () => {
  cy.visit('/transfer')
  cy.get('#recipient-account').type('1234567890')
  cy.get('#amount').type('100')
  cy.intercept('POST', '/api/transfer', { statusCode: 200, body: { success: true } }).as('transfer')
  cy.get('#transfer-button').click()
  cy.wait('@transfer')
  cy.get('.success-message').should('be.visible')
})

Заключение

Cypress — это мощный и универсальный фреймворк для сквозного тестирования, который может помочь вам обеспечить качество и надежность ваших веб-приложений. Его удобный для разработчиков API, мощные функции и отличная производительность делают его популярным выбором среди разработчиков и инженеров QA во всем мире. Следуя лучшим практикам, изложенным в этом руководстве, вы можете писать эффективные тесты Cypress, которые помогут вам выявлять ошибки на ранних этапах процесса разработки и предоставлять пользователям высококачественное программное обеспечение.

По мере того, как веб-приложения продолжают развиваться, важность сквозного тестирования будет только возрастать. Принятие Cypress и интеграция его в свой рабочий процесс разработки позволит вам создавать более надежные, надежные и удобные веб-интерфейсы.